<template>
    <div class="form-time-type">

        <!--S显示当前选择的卡券时间-->
        <div id="text-input" @click="showSelector">
            <cube-input
                    v-model="text"
            >
            </cube-input>
        </div>
        <!--E显示当前选择的卡券时间-->

    </div>
</template>

<script>
export default {
    name: "FormTimeType",
    data() {
        return {
            selector: null,
            text: '永久有效',
            options: [
                {text: '永久有效', value: '1'},
                {text: '过期时间', value: '2'},
                {text: '领券后几天有效', value: '3'}
            ]
        }
    },model: {
        prop: 'value',
        event: 'select'
    },
    props: {
        value: {
            type: String,
            default: '1'
        }
    },
    watch: {
        value() {
            this.getValue()
        }
    },
    mounted() {
        this.createSelector()
    },
    methods: {
        /**
         * 创建选择器
         */
        createSelector() {
            this.selector = this.$createPicker({
                title: '时间限制',
                zIndex: 2000,
                onSelect: (value) => {
                    this.$emit("select", value[0])
                }
            })
        },
        /**
         * 显示选取器
         */
        showSelector() {
            this.getValue()
            this.selector.show()
        },
        /**
         * 设置当前选择的默认值
         */
        getValue() {
            for(let i=0;i<this.options.length;i++) {
                if(this.options[i].value === this.value) {
                    this.selector.setData([this.options], [i])
                    this.text = this.options[i].text
                    return;
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
#text-input{
    position: relative;
    &::before{
        content: "";
        display: block;
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        background:rgba(0, 0, 0, 0);
    }
}
</style>
